* {
  margin: 0px;
  padding: 0px;
}

#wrap {
  width: 100%;
  height: auto;
}

#wrap .header {
  width: 100%;
  height: 3.33333rem;
  box-sizing: border-box;
  padding: 0.53333rem 0.93333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#wrap .header .left {
  width: 4.66667rem;
}

#wrap .header .left img:nth-of-type(1) {
  width: 0.8rem;
  height: 0.90667rem;
  vertical-align: middle;
}

#wrap .header .left span {
  font-size: 1.06667rem;
  font-weight: 700;
}

#wrap .header .left img:nth-of-type(2) {
  width: 0.66667rem;
  height: 0.4rem;
  vertical-align: 0.13333rem;
}

#wrap .header .right {
  width: 17.46667rem;
  height: 2rem;
  background-color: skyblue;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.86667rem;
  background-color: #f5f5f5;
}

#wrap .header .right img {
  width: 0.86667rem;
  height: 0.86667rem;
  margin-right: 0.66667rem;
}

#wrap .header .right span {
  font-size: 0.93333rem;
  color: #999;
}

#wrap .list {
  width: 100%;
  height: 6rem;
  overflow-x: scroll;
}

#wrap .list::-webkit-scrollbar {
  display: none;
}

#wrap .list ul {
  list-style: none;
  width: 65rem;
  height: 6rem;
}

#wrap .list ul > li {
  float: left;
  width: 5rem;
  height: 5.06667rem;
  text-align: center;
}

#wrap .list ul > li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

#wrap .list ul > li a img {
  width: 4rem;
  height: auto;
}

#wrap .list ul > li a p {
  font-size: 0.8rem;
  color: #666;
}

#wrap .qiang {
  width: 100%;
  height: 3.13333rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 1.13333rem 1.13333rem 0.53333rem 1.26667rem;
}

#wrap .qiang > img {
  width: 5.33333rem;
  height: 1.06667rem;
}

#wrap .qiang div {
  width: 4.93333rem;
  height: 1.46667rem;
  background-color: green;
  border-radius: 0.73333rem;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding-left: 0.33333rem;
  display: flex;
  align-items: center;
}

#wrap .qiang div span {
  font-size: 0.8rem;
  color: #333;
}

#wrap .qiang div > img {
  width: 0.33333rem;
  height: 0.4rem;
  margin-left: 0.2rem;
}

#wrap .img-area {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0 1rem;
}

#wrap .img-area .top {
  width: 100%;
  height: 9.8rem;
  display: flex;
  justify-content: space-between;
  border: 0.03333rem solid rgba(0, 0, 0, 0.1);
  border-radius: 0.4rem;
}

#wrap .img-area .top .zhuliye {
  width: 15.66667rem;
  height: 9.8rem;
  background-color: yellow;
  box-sizing: border-box;
  padding: 0.66667rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  background: url(https://p0.meituan.net/scarlett/8ce49a7c0bf78e2465ed1f335d1e4c7867922.png) no-repeat 50%/100% 100%;
  border-radius: 0 0.4rem 0.4rem 0;
}

#wrap .img-area .top .zhuliye > div:nth-of-type(1) {
  width: 14.33333rem;
  height: 4.33333rem;
}

#wrap .img-area .top .zhuliye > div:nth-of-type(1) p:nth-of-type(1) {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

#wrap .img-area .top .zhuliye > div:nth-of-type(1) p:nth-of-type(2) {
  font-size: 0.8rem;
  color: #fff;
}

#wrap .img-area .top .zhuliye > div:nth-of-type(2) {
  width: 100%;
  height: 1.73333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#wrap .img-area .top .zhuliye > div:nth-of-type(2) > div:nth-of-type(1) {
  width: 3.73333rem;
  height: 1.06667rem;
  background-color: #f0f0f0;
  font-size: 0.73333rem;
  font-weight: 700;
  color: #f55d48;
  border-radius: 0.33333rem;
  text-align: center;
  line-height: 1.06667rem;
}

#wrap .img-area .top .zhuliye > div:nth-of-type(2) > div:nth-of-type(2) {
  width: 4.4rem;
  height: 1.66667rem;
  border-radius: 1.06667rem;
  background-color: #fff;
  font-size: 0.86667rem;
  line-height: 1.66667rem;
  color: #f03d37;
  display: flex;
  justify-content: center;
  font-weight: 700;
  align-items: center;
}

#wrap .img-area .top .zhuliye > div:nth-of-type(2) > div:nth-of-type(2) img {
  width: 0.33333rem;
  height: 0.53333rem;
  margin-left: 0.2rem;
}

#wrap .img-area .top > img {
  width: 7.33333rem;
  height: 100%;
}

#wrap .img-area .middle {
  width: 100%;
  height: 13.93333rem;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-top: 0.66667rem;
}

#wrap .img-area .middle li:nth-of-type(2) div:nth-of-type(1) {
  width: 3.4rem;
  background: linear-gradient(270deg, #ffa30f, #ff7d3d);
}

#wrap .img-area .middle li:nth-of-type(3) div:nth-of-type(1) {
  width: 4.46667rem;
  background: linear-gradient(270deg, #f037c6, #a664ff);
}

#wrap .img-area .middle li {
  width: 7.33333rem;
  height: 100%;
}

#wrap .img-area .middle li img {
  width: 7.33333rem;
  height: 9.73333rem;
  border-radius: 0.4rem;
}

#wrap .img-area .middle li div:nth-of-type(1) {
  width: 5.06667rem;
  height: 1.06667rem;
  border-radius: 0.33333rem;
  line-height: 1.06667rem;
  background: linear-gradient(135deg, #ff7142, #ff0b0b);
  font-size: 0.66667rem;
  color: #fff;
  display: flex;
  font-weight: 700;
  margin-top: 0.4rem;
}

#wrap .img-area .middle li div:nth-of-type(1) img {
  width: 1.06667rem;
  height: 1.06667rem;
}

#wrap .img-area .middle li div:nth-of-type(2) {
  width: 100%;
  height: 2.4rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.86667rem;
  font-weight: 700;
  color: #333;
  margin-top: 0.26667rem;
  line-height: 1.2rem;
}

#wrap .img-area .bottom {
  width: 23rem;
  height: 4rem;
  border-radius: 0.4rem;
  margin-top: 1.66667rem;
  position: relative;
  overflow: hidden;
}

#wrap .img-area .bottom .focus {
  width: 500%;
  height: 100%;
  list-style: none;
  position: absolute;
  left: -23rem;
  transition: .5s;
}

#wrap .img-area .bottom .focus li {
  width: 23rem;
  height: 100%;
  float: left;
}

#wrap .img-area .bottom .focus li img {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
}

#wrap .img-area .bottom ol {
  list-style: none;
  position: absolute;
  bottom: 0.33333rem;
  right: 0.33333rem;
}

#wrap .img-area .bottom ol li {
  width: 0.33333rem;
  height: 0.33333rem;
  background-color: red;
  display: inline-block;
  transition: .3s;
  border-radius: 0.13333rem;
}

#wrap .img-area .bottom ol .current {
  width: 0.66667rem;
}

#wrap .daka {
  font-size: 1.06667rem;
  font-weight: 700;
  color: #333;
  box-sizing: border-box;
  padding: 1.66667rem 1rem 0.53333rem 1rem;
}

#wrap .star-list {
  width: 100%;
  height: 6.6rem;
  overflow-x: scroll;
}

#wrap .star-list::-webkit-scrollbar {
  display: none;
}

#wrap .star-list ul {
  width: 73.33333rem;
  height: 6.33333rem;
  padding: 0 1rem;
  list-style: none;
  box-sizing: border-box;
}

#wrap .star-list ul li {
  float: left;
  width: 4.8rem;
  height: 6.13333rem;
  text-align: center;
  margin: 0.13333rem 0.8rem 0 0;
}

#wrap .star-list ul li img {
  width: 3.33333rem;
  height: 3.33333rem;
  border-radius: 50%;
}

#wrap .star-list ul li p:nth-of-type(1) {
  font-size: 0.86667rem;
  font-weight: 700;
  color: #333;
  margin-top: 0.53333rem;
}

#wrap .star-list ul li p:nth-of-type(2) {
  font-size: 0.73333rem;
  color: #999;
  margin-top: 0.13333rem;
}

#wrap .look {
  width: 100%;
  height: 3.8rem;
  box-sizing: border-box;
  padding: 1.66667rem 1rem 0.53333rem 1rem;
  font-size: 1.06667rem;
  font-weight: 700;
}

#wrap .recommed {
  width: 100%;
  height: 12.2rem;
  overflow-x: scroll;
}

#wrap .recommed::-webkit-scrollbar {
  display: none;
}

#wrap .recommed ul {
  width: 67rem;
  height: 12.2rem;
  box-sizing: border-box;
  padding: 0 1rem;
  list-style: none;
}

#wrap .recommed ul li {
  float: left;
  width: 6.66667rem;
  height: 100%;
  border-radius: 0.4rem;
  margin-right: 0.53333rem;
}

#wrap .recommed ul li div:nth-of-type(1) {
  width: 6.66667rem;
  height: 3.33333rem;
  box-sizing: border-box;
  padding: 0.46667rem 0 0 0.6rem;
}

#wrap .recommed ul li div:nth-of-type(1) p:nth-of-type(1) {
  font-size: 0.93333rem;
  font-weight: 700;
  color: #fff;
}

#wrap .recommed ul li div:nth-of-type(1) p:nth-of-type(2) {
  font-size: 0.8rem;
  color: #fff;
}

#wrap .recommed ul li div:nth-of-type(2) {
  width: 6.66667rem;
  height: 8.93333rem;
}

#wrap .recommed ul li div:nth-of-type(2) img {
  width: 100%;
  height: 100%;
}

#wrap .recommed li.one {
  background: rgba(178, 178, 178, 0.5);
}

#wrap .recommed li.two {
  background: rgba(147, 136, 84, 0.5);
}

#wrap .recommed li.three {
  background: rgba(170, 145, 117, 0.5);
}

#wrap .tuijian {
  width: 100%;
  height: 3.8rem;
  box-sizing: border-box;
  padding: 1.66667rem 1rem 0.53333rem 1rem;
  font-size: 1.06667rem;
  font-weight: 700;
}

#wrap .show {
  width: 100%;
  height: 22.93333rem;
  padding: 0 1rem 0 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

#wrap .show ul {
  width: 11.2rem;
  height: 190rem;
  list-style: none;
}

#wrap .show ul:nth-of-type(1) li {
  border: 0.03333rem solid rgba(0, 0, 0, 0.15);
  width: 100%;
  height: 22.93333rem;
  border-radius: 0.8rem;
  margin-bottom: 0.66667rem;
}

#wrap .show ul:nth-of-type(1) li img {
  width: 100%;
  height: 15rem;
  border-radius: 0.8rem 0.8rem 0 0;
}

#wrap .show ul:nth-of-type(1) li > div {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.66667rem;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(1) {
  height: 2.53333rem;
  font-size: 0.86667rem;
  font-weight: 700;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.26667rem;
  margin-top: 0.4rem;
  margin-bottom: 0.26667rem;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(2) {
  color: #ff913d;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(2) span:nth-of-type(1) {
  font-size: 0.8rem;
  font-family: "MaoYanHeiTi-H";
  margin-right: 0.33333rem;
  font-weight: 500;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(2) span:nth-of-type(2) {
  font-size: 0.66667rem;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(3) {
  font-size: 0.8rem;
  color: #999;
  line-height: 0.66667rem;
  margin-top: 0.26667rem;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(3) span:nth-of-type(1) {
  font-size: 1.06667rem;
  font-weight: 700;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(4) {
  color: #f03d37;
  margin-top: 0.46667rem;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(4) span:nth-of-type(1) {
  font-size: 1.06667rem;
  font-weight: 700;
  margin-right: 0.2rem;
}

#wrap .show ul:nth-of-type(1) li div:nth-of-type(4) span:nth-of-type(2) {
  font-size: 0.8rem;
  font-weight: 400;
}

#wrap .show .right .short {
  width: 100%;
  height: 14.93333rem;
  border-radius: 0.8rem;
}

#wrap .show .right .short img {
  width: 100%;
  height: 100%;
  border-radius: 0.8rem;
}

#wrap .show .right li {
  border: 0.03333rem solid rgba(0, 0, 0, 0.15);
  width: 100%;
  height: 22.93333rem;
  border-radius: 0.8rem;
  margin-bottom: 0.66667rem;
}

#wrap .show .right li img {
  width: 100%;
  height: 15rem;
  border-radius: 0.8rem 0.8rem 0 0;
}

#wrap .show .right li > div {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.66667rem;
}

#wrap .show .right li div:nth-of-type(1) {
  height: 2.53333rem;
  font-size: 0.86667rem;
  font-weight: 700;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.26667rem;
  margin-top: 0.4rem;
  margin-bottom: 0.26667rem;
}

#wrap .show .right li div:nth-of-type(2) {
  color: #ff913d;
}

#wrap .show .right li div:nth-of-type(2) span:nth-of-type(1) {
  font-size: 0.8rem;
  font-family: "MaoYanHeiTi-H";
  margin-right: 0.33333rem;
  font-weight: 500;
}

#wrap .show .right li div:nth-of-type(2) span:nth-of-type(2) {
  font-size: 0.66667rem;
}

#wrap .show .right li div:nth-of-type(3) {
  font-size: 0.8rem;
  color: #999;
  line-height: 0.66667rem;
  margin-top: 0.26667rem;
}

#wrap .show .right li div:nth-of-type(3) span:nth-of-type(1) {
  font-size: 1.06667rem;
  font-weight: 700;
}

#wrap .show .right li div:nth-of-type(4) {
  color: #f03d37;
  margin-top: 0.46667rem;
}

#wrap .show .right li div:nth-of-type(4) span:nth-of-type(1) {
  font-size: 1.06667rem;
  font-weight: 700;
  margin-right: 0.2rem;
}

#wrap .show .right li div:nth-of-type(4) span:nth-of-type(2) {
  font-size: 0.8rem;
  font-weight: 400;
}
